<template>
  <div id='tmpl'>
    <div class="nav">
      <ul>
         <li>
          <router-link to="/video/videolist">首页</router-link>
        </li>
        <li>
          <router-link to="/in_theaters">正在热映</router-link>
        </li>
        <li>
          <router-link to="/coming_soon">即将上映</router-link>
        </li>
        <li>
          <router-link to="/top250">Top250</router-link>
        </li>
      </ul>
      <div class="search">
        <input type="text" placeholder="电影搜索">
        <button>
          <router-link to="">搜索</router-link>
        </button>
      </div>
    </div>
    <div class="mui-content" id="messa">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="item in list">
          <router-link v-bind="{to:'/movedetails/'+item.id}">
            <img :src="item.subject.images.small" class="moveimg">
          </router-link>
          <div class="meta">
            <h5 style='color:#3BB5FF'>
              <span>{{item.subject.title}}</span>
              <em style="color:red" >{{item.subject.rating.average}}分</em>
            </h5>
            <h5 style="color:yellowgreen">类型: {{item.subject.genres.join('、')}}
            </h5>
          </div>
        </li>
      </ul>
    </div>
  
  </div>
</template>
<script>
export default {
  data() {
    return {
        list:[]
    };
  },
  created() {
    this.getmovieList();
  },
  methods: {
    getmovieList: function () {
      var url = 'http://api.douban.com/v2/movie/us_box';
      this.$http.jsonp(url).then(function (response) {
        var data = response.body;
        this.list = data.subjects;
      })
    }
  }
}
</script>
<style lang="css" scoped>
.nav ul {
  overflow: hidden;
  margin: 0px;
  padding-left: 0px;
  background: rgba(0, 0, 0, 0.1);
}

.nav li {
  list-style: none;
  float: left;
  padding: 8px;
}

.search {
  width: 100%;
  height: 40px;
  padding-right: 60px;
  position: relative;
}

.search input {
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
}

.search button {
  width: 60px;
  position: absolute;
  right: 0px;
  ;
  top: 0;
  height: 40px;
  outline: none;
}

.list ul {
  padding-left: 0px;
  margin: 0px;
}

.list li {
  float: left;
  list-style: none;
}

.moveimg {
  height: 100px;
}
#messa ul {
  margin-top: 0px;
}
#messa li {
  padding: 0px;
}
</style>